<template>
  <div class="search">
    
    <el-container>
      <el-header>
        
        <el-row>
          <el-col :span="22" :offset="1">
            
            <el-collapse v-model="activeNames" @change="">
                <el-collapse-item title="合同列表" name="1">
                  <el-row :gutter="20">
          <el-col :span="20" :offset="2">
            客户名称：
            <el-select v-model="queryParams.customerName" 
            @change="getQueryFrom()"
            filterable placeholder="请选择"
            clearable>
              <el-option
                v-for="item in options"
                :key="item.customerName"
                :label="item.customerName"
                :value="item.customerName">
                <span style="float: left">{{ item.customerName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.salesOrderNumber }}</span>
              </el-option>
          </el-select>

          销售订单号：
            <el-select v-model="queryParams.salesOrderNumber"  filterable placeholder="请选择"
            @change="getQueryFrom()"
            clearable>
              <el-option
                v-for="item in options"
                :key="item.salesOrderNumber"
                :label="item.salesOrderNumber"
                :value="item.salesOrderNumber">
              </el-option>
          </el-select>

          销售日期：
            <el-select v-model="queryParams.salesDate"  filterable placeholder="请选择"
            @change="getQueryFrom()"
            clearable>
              <el-option
                v-for="item in options"
                :key="item.salesDate"
                :label="item.salesDate"
                :value="item.salesDate">
              </el-option>
          </el-select>
          </el-col>
          
        </el-row >
                  <el-table
                    ref="multipleTable"
                    height="700"
                    max-height="700"
                    tooltip-effect="dark"
                    @selection-change="handleSelectionChange"
                    :data="tableData"
                    style="width: 100%">
                    
                    
                    <el-table-column
                    prop="salesOrderNumber"
                    label="销售订单号">
                    </el-table-column>
                    <el-table-column
                    prop="salesDeliveryDate"
                    label="销售货期"
                    width="80">
                    </el-table-column>
                    <el-table-column
                    prop="salesDate"
                    label="销售日期"
                    width="160">
                    </el-table-column>
                    <el-table-column
                    prop="customerName"
                    label="客户名称"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    prop="salesInvoiceNumber"
                    label="销售开票号码"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="salesInvoiceDate"
                    label="销售开票日期">
                    </el-table-column>
                    <el-table-column
                    prop="salesInvoiceQuantity"
                    label="销售开票数量">
                    </el-table-column>
                    <el-table-column
                    prop="salesInvoiceAmount"
                    label="销售开票金额">
                    </el-table-column>
                    <el-table-column
                    prop="unpaidSalesInvoiceAmount"
                    label="销售未开票金额">
                    </el-table-column>
                    <el-table-column
                    prop="salesCost"
                    label="销售成本">
                    </el-table-column>
                    <el-table-column
                      prop="remarks"
                      label="备注"
                      width="300"
                      style="height: 50px;">
                    </el-table-column>
                    <el-table-column
                      fixed="right"
                      label="操作"
                      width="100">
                      <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <el-row :gutter="20">
                  <el-col :span="4" :offset="10">
                    <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="queryParams.pageNum"
                      :page-sizes="[10, 20, 30, 50]"   
                      :page-size="queryParams.pageSize"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="countNum"
                      > <!--分页Size   最大页数-->
                    </el-pagination>
                  </el-col>
                </el-row>
                </el-collapse-item>
              </el-collapse> 
          </el-col>
        </el-row>
          
           



    <el-row>
      <el-row :gutter="20">
        <el-col :span="24" >
          <el-divider content-position="right">下面处理数据</el-divider>
        </el-col>
      <el-col :span="22" :offset="1" style=" margin-bottom: 20px;" >
          <el-steps :active="active" simple >
          <el-step  @click.native="on_click(0)"  title="选择合同信息"></el-step>
          <el-step  @click.native="on_click(1)"  title="预约订货"></el-step>
          <el-step  @click.native="on_click(2)"  title="订货到达情况"></el-step>
          <el-step  @click.native="on_click(3)"  title="整理发货"></el-step>
          
          <el-step  @click.native="on_click(4)"  title="开票情况"></el-step>
          <el-step  @click.native="on_click(5)"  title="收款结账与项目统计"></el-step>
          
        </el-steps>
      </el-col>



<!-- step 1 -->
      <el-row>
        <el-row style=" margin-bottom: 20px;">
          <el-col  :span="20" :offset="2"  style="background-color:#DCE7F5; margin-bottom: 20px;" v-show="active==0">
            <!-- 展示选择项 -->
            <el-descriptions class="margin-top" style="margin: 10px;" title="确认合同信息" :column="3" :size="size" border>
              <template slot="extra">
                <el-button type="primary" @click="collapseOpen()" size="small">操作</el-button>
              </template>
              <el-descriptions-item>
                <template slot="label">
                  客户名称
                </template>
                {{ editform.customerName  }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  销售货期
                </template>
                {{ editform.salesDeliveryDate  }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  销售日期
                </template>
                {{ editform.salesDate  }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  销售订单号
                </template>
                {{ editform.salesOrderNumber }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                备注
                </template>
                {{ editform.remarks  }}
              </el-descriptions-item>
            </el-descriptions>
            
          </el-col>
          
        </el-row>
      </el-row>
       

<!-- step 2 -->
      <el-col :span="16" :offset="4" style="background-color:#DCE7F5; " v-show="active==1">
        <el-row :gutter="20" style="background-color:#DCE7F5; margin-bottom: 20px;">
          <el-col :span="4" :offset="16" >
            <el-button style="margin: 20px;" @click="openPurchase()">查看采购批次</el-button>
          </el-col>
          <el-col :span="20" :offset="2" >
            <el-table
          ref="multipleTable"
          max-height="600"
          tooltip-effect="dark"
          
          :data="step2_table"
          style="width: 90%">
          
          
          <el-table-column
          prop="productName"
          label="产品名称"
          width="180">
          </el-table-column>
          <el-table-column
          prop="model"
          label="型号"
          width="180">
          </el-table-column>
          <el-table-column
          prop="stockQuantity"
          label="当前库存数量"
          width="90">
          </el-table-column>
          <el-table-column
          prop="unit"
          label="单位"
          width="100">
          </el-table-column>
          <el-table-column
          prop="orderAmount"
          label="合同销售数量"
          width="100">
          </el-table-column>
          <el-table-column
          prop="purchaseAmount"
          label="已采购数量">
          </el-table-column>
         
        </el-table>

          </el-col>
        </el-row>


        <!-- 新增采购批次 -->
        <el-dialog class="HanderPop" title="新增采购批次" :visible.sync="addPurshaseBatch" >
          <el-form :model="purchaseform" :rules="rules" ref="purchaseform" :inline="true" label-position="right">
            <el-form-item label="采购员" :label-width="formLabelWidth" prop = "purchaser">
              <el-select class="inputplace"
              v-model="purchaseform.purchaser"
                placeholder="请选择活动区域" >
                <el-option
                  v-for="item in this.purchaserDict"
                  :key="item.dictCode"
                  :label="item.dictLabel"
                  :value="item.dictLabel">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="采购日期" :label-width="formLabelWidth" prop = "purchaseDate"> 
              <el-date-picker
                class="inputplace"
                style="width: 200px;"
                v-model="purchaseform.purchaseDate"
                align="right"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptionsdate"
                value-format="yyyy-MM-dd"
                clearable>
              </el-date-picker>
            </el-form-item>
            <el-form-item label="采购下单名称" :label-width="formLabelWidth"  prop = "orderName">
              <el-input class="inputplace" 
              v-model="purchaseform.orderName" ></el-input>
            </el-form-item>
            <el-form-item label="采购订单号" :label-width="formLabelWidth" prop = "orderNumber">
              <el-input class="inputplace" 
              v-model="purchaseform.orderNumber"></el-input>
            </el-form-item>
            
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="addPurshaseBatch = false">取 消</el-button>
            <el-button type="primary" @click="addtable('purchaseform')">确 定</el-button>
          </div>
        </el-dialog>  


        <!-- 采购批次抽屉 -->

        <el-drawer
          title="采购批次"
          :visible.sync="purchasedrawer"
          size="50%">
          <el-button @click="addPurshaseBatch = true" style="margin-left: 20px;margin-bottom: 20px;" plain>添加采购批次</el-button>
          <div>
            <el-table
              ref="multipleTable"
              height="650"
              tooltip-effect="dark"
              
              :data="PurchaseBatchList"
              style="width: 100%">
             
              <el-table-column
              prop="purchaser"
              label="采购员">
              </el-table-column>
              <el-table-column
                prop="purchaseDate"
                label="采购日期">
              </el-table-column>
              <el-table-column
                prop="orderName"
                label="采购下单名称">
              </el-table-column>
              <el-table-column
                prop="orderNumber"
                label="采购订单号">
              </el-table-column>
              <el-table-column
                fixed="right"
                label="相关采购明细"
                width="120">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="openDetailDrawer(scope.row)"
                    type="text"
                    size="small">
                      查看
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          
          
          <el-drawer
            title="明细"
            :append-to-body="true"
            size="90%"
            :visible.sync="detailDrawer">
            <el-button @click="addPurchaseDetail = true" style="margin-left: 20px;margin-bottom: 20px;" plain>添加批次明细</el-button>
              <el-table
                ref="multipleTable"
                max-height="600"
                tooltip-effect="dark"
                @selection-change="handleSelectionChange"
                :data="PurchaseDetailList"
                 
                style="width: 100%;">
                
                <el-table-column type="expand">
                    <template slot-scope="props">
                      <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="产品名称">
                          <span>{{ props.row.productName }}</span>
                        </el-form-item>
                        <el-form-item label="型号">
                          <span>{{ props.row.model }}</span>
                        </el-form-item>
                        <el-form-item label="库存数量">
                          <span>{{ props.row.stockQuantity }}</span>
                        </el-form-item>
                        <el-form-item label="单位">
                          <span>{{ props.row.unit }}</span>
                        </el-form-item>
                        
                      </el-form>
                    </template>
                  </el-table-column>
                <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>
                
                <el-table-column
                prop="orderNumberProduct"
                label="订单号">
                </el-table-column>
                <el-table-column
                prop="quantity"
                label="数量"
                width="80">
                </el-table-column>
                <el-table-column
                prop="unit"
                label="单位"
                width="60">
                </el-table-column>
                <el-table-column
                prop="unitPrice"
                label="采购未税单价"
                width="100">
                </el-table-column>
                <el-table-column
                prop="amount"
                label="采购未税金额"
                width="100">
                </el-table-column>
                <el-table-column
                prop="taxIncludedPrice"
                label="含税单价">
                </el-table-column>
                <el-table-column
                prop="totalPrice"
                label="采购总价">
                </el-table-column>
                <el-table-column
                prop="paymentVoucher"
                label="付款凭证">
                </el-table-column>
                <el-table-column
                prop="paymentDate"
                label="付款日期">
                </el-table-column>
                <el-table-column
                prop="paymentAmount"
                label="付款金额">
                </el-table-column>
                <el-table-column
                  prop="unpaidAmount"
                  label="未付款金额"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="invoiceNumber"
                  label="进项发票号码"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="invoiceDate"
                  label="进项开票日期"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="invoiceQuantity"
                  label="进项开票数量"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="invoiceAmount"
                  label="进项开票数量"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="unpaidInvoiceAmount"
                  label="未开票金额"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="deliveryDate"
                  label="货期"
                  width="100">
                </el-table-column>
                
              </el-table>

              

          </el-drawer>
          </div>
        </el-drawer>
                <!-- 明细新增弹框 -->
                <el-dialog class="HanderPop" title="新增采购明细" :visible.sync="addPurchaseDetail" >   
                  <el-row>
                  <el-rol :span="16" :offset="4">
                    选择采购信息
                    <el-table
                      ref="multipleTable"
                      max-height="150"
                      tooltip-effect="dark"
                      :data="step2_table"
                      style="width: 90%"
                      @current-change="addStockId"
                      highlight-current-row>
                    
                      <el-table-column
                      prop="productName"
                      label="产品名称"
                      width="180">
                      </el-table-column>
                      <el-table-column
                      prop="model"
                      label="型号"
                      width="180">
                      </el-table-column>
                      <el-table-column
                      prop="stockQuantity"
                      label="当前库存数量"
                      width="110">
                      </el-table-column>
                      <el-table-column
                      prop="unit"
                      label="单位"
                      width="100">
                      </el-table-column>
                      <el-table-column
                      prop="orderAmount"
                      label="合同销售数量"
                      width="100">
                      </el-table-column>
                      <el-table-column
                      prop="purchaseAmount"
                      label="已采购数量">
                      </el-table-column>
                    </el-table>
                  </el-rol>
                </el-row>
                  <el-form :model="purchaseDetail" :rules="rules" ref="purchaseDetail" :inline="true" label-position="right">
                     
 
                     <el-form-item label="采购数量" :label-width="formLabelWidth"  prop="quantity">
                       <el-input class="inputplace" 
                       v-model="purchaseDetail.quantity"></el-input>
                     </el-form-item>
                     <el-form-item label="单位" :label-width="formLabelWidth" prop="unit">
                       <el-input class="inputplace" 
                       v-model="purchaseDetail.unit"></el-input>
                     </el-form-item>
                     <el-form-item label="订货号" :label-width="formLabelWidth" prop="orderNumberProduct" >
                       <el-input class="inputplace" 
                       style="width: 530px;"
                       v-model="purchaseDetail.orderNumberProduct"></el-input>
                     </el-form-item>
                     <el-form-item label="采购未税单价" :label-width="formLabelWidth"  prop="unitPrice">
                       <el-input class="inputplace" 
                       @input="Price(1)"
                       v-model="purchaseDetail.unitPrice"></el-input>
                     </el-form-item>
                     <el-form-item label="采购未税金额" :label-width="formLabelWidth"  prop="amount">
                       <el-input class="inputplace" 
                       v-model="purchaseDetail.amount"></el-input>
                     </el-form-item>
                     <el-form-item label="含税单价" :label-width="formLabelWidth"  prop="taxIncludedPrice">
                       <el-input class="inputplace" 
                       @input="Price(1)"
                       v-model="purchaseDetail.taxIncludedPrice"> </el-input>
                     </el-form-item>
                     <el-form-item label="采购总价" :label-width="formLabelWidth"  prop="totalPrice">
                       <el-input class="inputplace" 
                       v-model="purchaseDetail.totalPrice"></el-input>
                     </el-form-item>
                     <el-form-item label="付款凭证" :label-width="formLabelWidth"   prop="paymentVoucher">
                       <el-input class="inputplace" 
                       v-model="purchaseDetail.paymentVoucher"></el-input>
                     </el-form-item>
                     <el-form-item label="付款日期" :label-width="formLabelWidth"  prop="paymentDate">
                       <el-date-picker
                         style="width: 200px;"
                         v-model="purchaseDetail.paymentDate"
                         type="date"
                         placeholder="选择日期">
                       </el-date-picker>
                     </el-form-item>
                     <el-form-item label="付款金额" :label-width="formLabelWidth"   prop="paymentAmount">
                       
                       <el-input class="inputplace" 
                       @input="Price(1)"
                       v-model="purchaseDetail.paymentAmount"></el-input>
                     </el-form-item>
                     <el-form-item label="未付款金额" :label-width="formLabelWidth"  prop="unpaidAmount">
                       <el-input class="inputplace" 
                       
                       v-model="purchaseDetail.unpaidAmount"></el-input>
                     </el-form-item>
                     <el-form-item label="进项发票号码" :label-width="formLabelWidth"   prop="invoiceNumber">
                       <el-input class="inputplace" 
                       v-model="purchaseDetail.invoiceNumber "></el-input>
                     </el-form-item>
                     <el-form-item label="进项开票日期" :label-width="formLabelWidth"    prop="invoiceDate">
                       <el-date-picker
                         style="width: 200px;"
                         v-model="purchaseDetail.invoiceDate"
                         type="date"
                         placeholder="选择日期">
                       </el-date-picker>
                     </el-form-item>
                     <el-form-item label="进项开票数量" :label-width="formLabelWidth"    prop="invoiceQuantity">
                       <el-input class="inputplace" 
                       v-model="purchaseDetail.invoiceQuantity"></el-input>
                     </el-form-item>
                     <el-form-item label="开票含税金额" :label-width="formLabelWidth"  prop="invoiceAmount">
                       <el-input class="inputplace" 
                       @input="Price(1)"
                       v-model="purchaseDetail.invoiceAmount" ></el-input>
                     </el-form-item>
                     <el-form-item label="未开票金额" :label-width="formLabelWidth"  prop="unpaidInvoiceAmount">
                       <el-input class="inputplace" 
                       v-model="purchaseDetail.unpaidInvoiceAmount" ></el-input>
                     </el-form-item>
                     <el-form-item label="货期" :label-width="formLabelWidth"  prop="unpaidInvoiceAmount">
                       <el-input class="inputplace" 
                       v-model="purchaseDetail.deliveryDate" ></el-input>
                     </el-form-item>
                   </el-form>
                   <div slot="footer" class="dialog-footer">
                     <el-button @click="addPurchaseDetail=false">取 消</el-button>
                     <el-button type="primary" @click="addPurchaseDetailTable('purchaseDetail')">确 定</el-button>
                   </div>
                   </el-dialog>  
                   
      </el-col>



<!-- step 3 -->
      <el-col  :span="22" :offset="1"style="background-color:#DCE7F5; " v-show="active==2">
        <el-row >
          <el-col :span="10" :offset="0.5">
            <el-table
                  ref="multipleTable"
                  height="530"
                  tooltip-effect="dark"
                  
                  :data="PurchaseBatchList"
                  style="width: 100%;margin: 16px;">
                
                  <el-table-column
                  prop="purchaser"
                  label="采购员"
                  width="70">
                  </el-table-column>
                  <el-table-column
                    prop="purchaseDate"
                    label="采购日期">
                  </el-table-column>
                  <el-table-column
                    prop="orderName"
                    label="采购下单名称">
                  </el-table-column>
                  <el-table-column
                    prop="orderNumber"
                    label="采购订单号">
                  </el-table-column>
                  <el-table-column
                    prop="purchaseType"
                    label="当前状态">
                  </el-table-column>
                  <el-table-column
                    fixed="right"
                    label="相关采购明细"
                    width="100">
                    <template slot-scope="scope">
                      <el-button
                        @click.native.prevent="viewPurchaseDetail(scope.row)"
                        type="text"
                        size="small">
                          查看
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>

              <el-col :span="11" :offset="1">
                  <el-table
                  ref="multipleTable"
                  height="530"
                  tooltip-effect="dark"
                  @selection-change="handleSelectionChange"
                  :data="PurchaseDetailList"
                  style="width: 100%;margin: 16px;">>
                
                  
                  <el-table-column
                  fix
                  prop="productName"
                  label="库存名称">
                  </el-table-column>
                  <el-table-column
                  fix
                  prop="model"
                  label="型号">
                  </el-table-column>
                  <el-table-column
                  fix
                  prop="stockQuantity"
                  label="库存数量">
                  </el-table-column>
                  <el-table-column
                  fix
                  prop="orderNumberProduct"
                  label="订单号">
                  </el-table-column>
                  <el-table-column
                  prop="quantity"
                  label="数量"
                  width="80">
                  </el-table-column>
                  <el-table-column
                  prop="unit"
                  label="单位"
                  width="60">
                  </el-table-column>
                  <el-table-column
                  prop="unitPrice"
                  label="采购未税单价"
                  width="100">
                  </el-table-column>
                  <el-table-column
                  prop="amount"
                  label="采购未税金额"
                  width="100">
                  </el-table-column>
                  <el-table-column
                  prop="taxIncludedPrice"
                  label="含税单价">
                  </el-table-column>
                  <el-table-column
                  prop="totalPrice"
                  label="采购总价">
                  </el-table-column>
                  <el-table-column
                  prop="paymentVoucher"
                  label="付款凭证">
                  </el-table-column>
                  <el-table-column
                  prop="paymentDate"
                  label="付款日期">
                  </el-table-column>
                  <el-table-column
                  prop="paymentAmount"
                  label="付款金额">
                  </el-table-column>
                  <el-table-column
                    prop="unpaidAmount"
                    label="未付款金额"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    prop="invoiceNumber"
                    label="进项发票号码"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    prop="invoiceDate"
                    label="进项开票日期"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    prop="invoiceQuantity"
                    label="进项开票数量"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    prop="invoiceAmount"
                    label="进项开票数量"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    prop="unpaidInvoiceAmount"
                    label="未开票金额"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    prop="deliveryDate"
                    label="货期"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    fixed="right"
                    label="操作"
                    width="120">
                    <template slot-scope="scope">
                      <el-button
                        @click.native.prevent="arriveGood(scope.row)"
                        type="text"
                        size="small"
                        v-show="scope.row.isArrived != 2"
                        >
                        到货
                      </el-button>
                      <b v-show="scope.row.isArrived == 2">已到货</b>
                    </template>
                  </el-table-column>

                  

              </el-table>
              </el-col>
            </el-row>
      </el-col>
<!-- step 4 -->
      <el-col  :span="22" :offset="1"style="background-color:#DCE7F5; " v-show="active==3">
       
        <el-col :span="13" :offset="0.5">
          <span style="margin-left: 4%; font-family: AlimamaShuHeiTi;">发货情况</span>
                  <el-table
                  ref="multipleTable"
                  height="530"
                  tooltip-effect="dark"
                  @selection-change="handleSelectionChange"
                  :data="step4_table"
                  style="width: 100%;margin: 16px;">
                
                  
                  <el-table-column
                  fix
                  prop="productName"
                  label="库存名称"
                  width="140">
                  </el-table-column>
                  <el-table-column
                  fix
                  prop="model"
                  label="型号"
                  width="140">
                  </el-table-column>
                  <el-table-column
                  fix
                  prop="stockQuantity"
                  label="库存数量"
                  width="100">
                  </el-table-column>
                 
                  <el-table-column
                  prop="orderAmount"
                  label="所需数量"
                  width="100">
                  </el-table-column>
                  <el-table-column
                  prop="deliverAmount"
                  label="已发货数量"
                  width="100">
                  </el-table-column>
                  <el-table-column
                  prop="unit"
                  label="单位"
                  width="50">
                  </el-table-column>
                  <el-table-column
                    fixed="right"
                    label="操作"
                    width="120">
                    <template slot-scope="scope">
                      <el-button
                        @click.native.prevent="deliverHandler(scope.row)"
                        type="text"
                        size="small"
                        v-show="scope.row.deliverAmount <scope.row.orderAmount "
                        >
                        发 货
                      </el-button>
                      <b v-show="scope.row.deliverAmount ==scope.row.orderAmount">已发货</b>
                      <b v-show="scope.row.deliverAmount > scope.row.orderAmount">超发</b>
                    </template>
                  </el-table-column>
              </el-table>


              <el-dialog title="发货" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                  <el-form-item label="发货数量" :label-width="formLabelWidth">
                    <el-input-number v-model="deliverInfo.deliverAmount"  :min="1" :max ="deliverInfo.deliverAmount"  label="描述文字"></el-input-number>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取 消</el-button>
                  <el-button type="primary" @click="deliverGoods()">确 定</el-button>
                </div>
              </el-dialog>


              </el-col>
              <el-col :span="10" >
                  <span style=" margin-left: 4%;font-family: AlimamafangyuanTi;">发货记录</span>
                  <el-table
                  ref="multipleTable"
                  height="530"
                  tooltip-effect="dark"
                  @selection-change="handleSelectionChange"
                  :data="deliverList"
                  style="width: 100%;margin-left: 16px;margin-top: 16px;margin-bottom: 16px;">
                  <el-table-column
                  fix
                  prop="deliverDate"
                  label="发货时间"
                  width="100">
                  </el-table-column>
                  <el-table-column
                  fix
                  prop="productName"
                  label="库存名称"
                  width="100">
                  </el-table-column>
                  <el-table-column
                  fix
                  prop="model"
                  label="型号"
                  width="100">
                  </el-table-column>
                  <el-table-column
                  prop="deliverAmount"
                  label="发货数量"
                  width="50">
                  </el-table-column>
                  <el-table-column
                  prop="unit"
                  label="单位"
                  width="50">
                  </el-table-column>
                  
                  <el-table-column
                  prop="deliverType"
                  label="状态"
                  width="80">
                  </el-table-column>
                  <el-table-column
                    fixed="right"
                    label="操作"
                    width="150">
                    
                      <template  slot-scope="scope">
                        <el-button v-show="scope.row.deliverType =='已发货'"  type="success" size="small" @click="deliverdia(scope.row)" round>到货</el-button>
                        <el-button v-show="scope.row.deliverType =='已发货'"  type="text" size="small" @click="deliverCancledia(scope.row)">撤销/退货</el-button>
                        <b v-show="scope.row.deliverType =='已退货'">已失效</b>    
                        <b style="color:darkgreen;" v-show="scope.row.deliverType =='已完成'">完&nbsp;&nbsp;&nbsp;&nbsp;成</b>     
                      </template>
                        
                                    
                  </el-table-column>
              </el-table>

              <el-dialog
                title="提示"
                :visible.sync="deliverDia"
                width="30%"
                :before-close="handleClose">
                <span>确认客户已收到货？</span>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="deliverDia = false">取 消</el-button>
                  <el-button type="primary" @click=" deliverArrive()">确 定</el-button>
                </span>
              </el-dialog>
              <el-dialog
                title="提示"
                :visible.sync="deliverCancleDia"
                width="30%"
                :before-close="handleClose">
                <span>确认撤销？</span>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="deliverCancleDia = false">取 消</el-button>
                  <el-button type="primary" @click="deliverCancle()">确 定</el-button>
                </span>
              </el-dialog>
              </el-col>
      </el-col>

<!-- step 5 -->
      <el-col  :span="22" :offset="1"style="background-color:#DCE7F5; " v-show="active==4">
        <el-col :span="15" :offset="0.5">
          <span style="margin: 1%; font-family: AlimamaShuHeiTi;">销售开票情况</span>
          <el-button style="margin: 1%;"  type="primary" @click="invoicingRecord('open')" plain>开票登记</el-button>
          
          <el-dialog title="开票登记"  
          width="55%"
          :visible.sync="dialogStep5Visible">
            <el-form :model="step5_invoiceForm">
              <el-form-item label="开票号码" style="width: 100%;" prop="invoiceNumber">
                <el-input class="inputplace"  style="width: 60%;"
                v-model="step5_invoiceForm.invoiceNumber"></el-input>
              </el-form-item>
              <el-form-item label="开票时间" style="width: 100%;"   prop="invoiceDate">
                <el-date-picker
                    style="width: 200px;"
                    v-model="step5_invoiceForm.invoiceDate"
                    type="date"
                    placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
              <el-row>
                  <el-rol :span="16" >
                    选择开票明细
                    <el-table
                    ref="multipleTable"
                    height="500"
                    tooltip-effect="dark"
                    :data="step5_table"
                    style="width: 100%">
                    
                    
                    <el-table-column
                    prop="productName"
                    label="产品名称"
                    width="130">
                    </el-table-column>
                    <el-table-column
                    prop="model"
                    label="型号"
                    width="130">
                    </el-table-column>
                  
                    
                    <el-table-column
                    prop="orderAmount"
                    label="合同销售数量"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="invoiceAmount"
                    label="已开票零件数量"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="orderPrice"
                    label="合同单价"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="invoicingPrice"
                    label="开票单价"
                    width="100">
                    </el-table-column>
                    
                    <el-table-column
                    prop="unit"
                    label="单位"
                    width="40">
                    </el-table-column>
                    <el-table-column
                    
                    label="总金额"
                    width="100">
                    <template  slot-scope="scope">
                    <b>{{scope.row.amount==undefined?0:scope.row.amount*scope.row.orderPrice}}</b>
                    </template>  
                  </el-table-column>
                    <el-table-column
                    label="开票数量"
                    width="150">
                    <template  slot-scope="scope" v-show="scope.row.invoiceAmount==scope.row.orderAmount" >
                      <el-input-number v-show="scope.row.invoiceAmount!=scope.row.orderAmount"  style="width: 120px;" v-model="scope.row.amount"  :min="0" :max ="scope.row.orderAmount-scope.row.invoiceAmount"></el-input-number>
                        <b v-show="scope.row.invoiceAmount==scope.row.orderAmount">已完成</b>
                        
                    </template>
                    </el-table-column>
                    </el-table>
                  </el-rol>
                </el-row>


            </el-form>

            <div slot="footer" class="dialog-footer">
              <el-button @click="invoicingRecord('no')">取 消</el-button>
              <el-button type="primary" @click="invoicingRecord('ok')">确 定</el-button>
            </div>
          </el-dialog>

            <el-table
          ref="multipleTable"
          height="500"
          tooltip-effect="dark"
          :data="step5_table"
          style="width: 100%">
          
          
          <el-table-column
          prop="productName"
          label="产品名称"
          width="130">
          </el-table-column>
          <el-table-column
          prop="model"
          label="型号"
          width="130">
          </el-table-column>
         
          
          <el-table-column
          prop="orderAmount"
          label="合同销售数量"
          width="100">
          </el-table-column>
          <el-table-column
          prop="invoiceAmount"
          label="已开票零件数量">
          </el-table-column>
          <el-table-column
          prop="unit"
          label="单位"
          width="100">
          </el-table-column>
          <el-table-column
          prop="unit"
          label="开票状态"
          width="100">
          <template  slot-scope="scope">
              
              <b v-show="scope.row.invoiceAmount==scope.row.orderAmount">已完成</b>
              <b v-show="scope.row.invoiceAmount<scope.row.orderAmount">待开票</b>
          </template>
          </el-table-column>
          </el-table>

          
        </el-col>
        <el-col :span="7" :offset="2">
          <div>
            <div style="margin-top: 4%;">
              <span style=" font-family: AlimamaShuHeiTi;">销售开票记录</span>
            </div>
          <el-table
          ref="multipleTable"
          height="500"
          tooltip-effect="dark"
          :data="step5_table_2"
          style="width: 100%;margin-top: 2%;margin-bottom: 3%;">
          
          
          <el-table-column
          prop="invoiceDate"
          label="开票时间"
          width="150">
          </el-table-column>
          <el-table-column
          prop="invoiceNumber"
          label="开票号码"
          width="150">
          </el-table-column>
         
          
         
          <el-table-column
          
          label="开票明细"
          width="110">
            <template slot-scope="scope">
              <el-button type="text" size="small"        @click="invoiceDetailList(scope.row)">查看</el-button>
              <el-button type="text" style="color:red;"  @click="invoiceDetailDel(scope.row)" size="small" >删除</el-button>
            </template>
          </el-table-column>
          </el-table>
          <el-drawer
            title="开票明细"
            :visible.sync="step5_dir"
            direction="rtl"
            size="50%">
            <el-table :data="step5Dirtable">
                <el-table-column property="productName" label="库存名称" width="150"></el-table-column>
                <el-table-column property="model" label="型号" width="150"></el-table-column>
                <el-table-column property="price" label="单价" width="200"></el-table-column>
                <el-table-column property="amount" label="数量"></el-table-column>
                <el-table-column property="invoicingDetailAmount" label="总价"></el-table-column>
                
              </el-table>
          </el-drawer>
        </div>
        </el-col>
      </el-col>
<!-- step 6 -->
      <el-col  :span="22" :offset="1"style="background-color:#DCE7F5; " v-show="active==5">
        <div style="margin: 10px;">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-card shadow="hover" style="width: 100%;margin-top: 20px; ">
                  <div style="width: 100%; display: inline-block; ">
                    <el-col :span="24">
                      <div>
                        <el-statistic
                          group-separator=","
                          :precision="2"
                          :value="paymentFrom.purchasePrice"
                          :title="purTitle"
                          :suffix="'元'"
                        ></el-statistic>
                      </div>
                    </el-col>
                  </div>
                </el-card>
                
              </el-col>
              <el-col :span="6">
              <el-card shadow="hover" style="width: 100%;margin-top: 20px; ">
                  <div style="width: 100%; display: inline-block; ">
                    
                    <el-col :span="24">
                      <div>
                        <el-statistic
                          group-separator=","
                          :precision="2"
                          :value="paymentFrom.totalPrice"
                          :title="'合同总价'"
                          :suffix="'元'"
                        ></el-statistic>
                      </div>
                    </el-col>
                    
                  </div>
                </el-card>
              </el-col>

              <el-col :span="6">
               
              <el-card shadow="hover" style="width: 100%;margin-top: 20px; ">
                  <div style="width: 100%; display: inline-block; ">
                    
                    <el-col :span="24">
                      <div>
                        <el-statistic
                          group-separator=","
                          :precision="2"
                          :value="paymentFrom.payPrice"
                          :title="'已收款'"
                          :suffix="'元'"
                        ></el-statistic>
                      </div>
                    </el-col>
                    
                  </div>
                </el-card>
                
              </el-col>
              <el-col :span="6">
              
              <el-card shadow="hover" style="width: 100%;margin-top: 20px; ">
                  <div style="width: 100%; display: inline-block; ">
                    
                    <el-col :span="24">
                      <div>
                        <el-statistic
                          group-separator=","
                          :precision="2"
                          :value="paymentFrom.unpayPrice"
                          :title="'未收款'"
                          :suffix="'元'"
                        ></el-statistic>
                      </div>
                    </el-col>
                    
                  </div>
                </el-card>
                
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6">  
                  <!-- echart -->
                  <el-card shadow="hover" style="width: 100%;height: 400px;margin-top: 20px; ">
                  <div style="width: 100%; display: inline-block; ">
                    
                    <el-col :span="24">
                      
                         <div id="purchaseRate"  style=" width: 300px;height: 400px;"></div>
                      
                    </el-col>
                    
                  </div>
                </el-card>
                 
              </el-col>
              <el-col :span="6" >  
                  <!-- echart -->
                  <el-card shadow="hover" style="width: 100%;height: 400px;margin-top: 20px; ">
                  <div style="width: 100%; display: inline-block; ">
                    
                    <el-col :span="24">
                      <div>
                         <div id="deliverRate"  style=" width: 300px;height: 400px;"></div>
                      </div>
                    </el-col>
                    
                  </div>
                </el-card>
                 
              </el-col>
              <el-col :span="6" >  
                  <!-- echart -->
                  <el-card shadow="hover" style="width: 100%;height: 400px;margin-top: 20px; ">
                  <div style="width: 100%; display: inline-block; ">
                    
                    <el-col :span="24">
                      <div>
                         <div id="invoiceRate"  style=" width: 300px;height: 400px;"></div>
                      </div>
                    </el-col>
                    
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6" >  
                  <!-- echart -->
                  <el-card shadow="hover" style="width: 100%;height: 400px;margin-top: 20px; ">
                  <div style="width: 100%; display: inline-block; ">
                    
                    <el-col :span="24">
                      <div>
                         <div id="paymentRate"  style=" width: 300px;height: 400px;"></div>
                      </div>
                    </el-col>
                    
                  </div>
                </el-card>
                 
              </el-col>
            </el-row>
        </div>
      </el-col>




     </el-row>
     <el-row>
      <el-col  :span="22" :offset="1">
            <el-button v-show="this.active!=5" type="primary" style=" margin-left:45%;margin-right: 45%;" @click="nextStep()" plain  >下一步</el-button>
          </el-col>
     </el-row>
    </el-row>
    </el-header>      
    
     
    </el-container>
    
  </div>
  
</template>





















<script>
import * as echarts from "echarts";
import { getSalesOrderList,getSalesOrderid,getAllSalesOrder,getSalesOrderInsert,getSalesOrderEdit,getSalesOrderDelete,getSalesOrderCount} from "@/api/finance/SalesOrder/SalesOrder";
import { getSalesDetailList,getSalesDetailid,getAllSalesDetail,getSalesDetailInsert,getSalesDetailEdit,getSalesDetailDelete,getSalesDetailCount} from "@/api/finance/SalesDetail/SalesDetail";
import { getPurchaseBatchList,getPurchaseBatchid,getAllPurchaseBatch,getPurchaseBatchInsert,getPurchaseBatchEdit,getPurchaseBatchDelete,getPurchaseBatchCount} from "@/api/finance/PurchaseBatch/PurchaseBatch";
import { getPurchaseDetailList,getPurchaseDetailid,getAllPurchaseDetail,getPurchaseDetailInsert,getPurchaseDetailEdit,getPurchaseDetailDelete,getPurchaseDetailCount,getPurchaseDetailaddStock,getProcurementStatistics} from "@/api/finance/PurchaseDetail/PurchaseDetail";
import { getStockInsert,getAllStock,getStockid,getStockPurchase,getStockPurchaseArrive,DeductInventoryShippingRecords,UndeductInventoryShippingRecords } from "@/api/finance/Stock/Stock";
import { getDeliverRecordList,getDeliverRecordid,getAllDeliverRecord,getDeliverRecordInsert,getDeliverRecordEdit,getDeliverRecordDelete,getDeliverRecordCount} from "@/api/finance/deliverRecord/deliverRecord";
import { getInvoicingList,getInvoicingid,getAllInvoicing,getInvoicingInsert,getInvoicingEdit,getInvoicingDelete,getInvoicingCount,getSalesOrderInvoicingById,saveInvoicingAndDetail,getkltInvoicingDetailList,delInvoicing} from "@/api/finance/Invoicing/Invoicing";
import { checkOut } from "@/api/finance/PaymentSales/PaymentSales";
import { listData } from "@/api/system/dict/data" 
import { getToken } from "@/utils/auth";
export default {
  inheritAttrs: false,
  components: {},
  props: [],
  data() {
    return {
      //  step6

      purTitle:undefined,
      paymentFrom:{
        payPrice: 0 ,
        purchasePrice: 0,
        purchaseType:undefined,
        totalPrice:0,
        unpayPrice: 0
      },
      // step5
      step5_dir:false,
      dialogStep5Visible:false,
      step5_invoiceForm:{
        salesOrderId:undefined,
        invoiceNumber:undefined,
        invoiceDate:undefined,
      },
      

      // step 4
      dialogFormVisible:false,
      deliverDia:false,
      deliverRow:undefined,
      deliverCancleDia:false,
      deliverCancleRow:undefined,

      // 步骤条
      active:0,
      // 折叠面板
      activeNames: ["1"],
      // 按钮可用
      editBotton:true,
      deleteBotton:true,
      purchasedrawer:false,
      detailDrawer:false,
      // 表格数据
      tableData:[],
      step2_table:[],
      step4_table:[],
      step5_table:[],
      step5_table_2:[],
      step5Dirtable:[],
      step6_data:[],
      deliverList:[],
      
      PurchaseBatchList:[],
      PurchaseDetailList:[],
      
      // 添加库存数量
      AddStock:{
        isArrived:2,
        StockId:undefined,
        purchaseDetailId:undefined,
        purchaseId:undefined
      },
      visible1: false,
      visible4: false,



      // 采购员数据
      purchaserDict:[],
      countNum:0,
      restaurants:[],
      restaurants1:[],
      restaurants3:[],
      restaurants5:[],
      restaurants6:[],
      restaurants7:[],
      queryParams:{
        customerName :'',
        salesDate:'',
        salesOrderNumber:'',
       
        pageSize:10,
        pageNum:1,
        current:1,
      },
      purchaseform: {
          purchaseId:undefined,
          salesOrderId:undefined,
          purchaser:'',
          purchaseDate:'',
          orderName:'',
          orderNumber:'',
          
          createSource: this.$store.state.user.name,
          updateUser: this.$store.state.user.name
      },
      formData: {
        mobile: '',
        field102: undefined,
        field103: false,
        field108: null,
        field107: undefined,
      },
      // 添加
      form: {
          salesOrderNumber:undefined,
          salesDeliveryDate:undefined,
          salesDate:undefined,
          customerName:undefined,
          salesInvoiceNumber:undefined,
          salesInvoiceDate:undefined,
          salesInvoiceQuantity:undefined,
          salesInvoiceAmount:undefined,
          unpaidSalesInvoiceAmount:undefined,
          salesCost:undefined,
          remarks:undefined,
          createSource: this.$store.state.user.name,
          updateUser: this.$store.state.user.name
        },

      editform:{
          salesOrderId:undefined,
          salesOrderNumber:undefined,
          salesDeliveryDate:undefined,
          salesDate:undefined,
          customerName:undefined,
          salesInvoiceNumber:undefined,
          salesInvoiceDate:undefined,
          salesInvoiceQuantity:undefined,
          salesInvoiceAmount:undefined,
          unpaidSalesInvoiceAmount:undefined,
          salesCost:undefined,
          remarks:undefined,
          updateUser: this.$store.state.user.name
      },
      purchaseDetail:{
          productName:undefined,
          purchaseName:undefined,
          purchaseId:undefined,
          stockId:undefined,
          quantity:undefined,
          orderNumberProduct:undefined,
          unitPrice:undefined,
          unit:undefined,
          amount:undefined,
          taxIncludedPrice:undefined,
          totalPrice:undefined,
          paymentVoucher:undefined,
          paymentDate:undefined,
          paymentAmount:undefined,
          unpaidAmount:undefined,
          invoiceNumber:undefined,
          invoiceDate:undefined,
          invoiceQuantity:undefined,
          invoiceAmount:undefined,
          unpaidInvoiceAmount:undefined,
          deliveryDate:undefined,
          updateUser: this.$store.state.user.name
      },
      deliverInfo:{
        salesOrderId:undefined,
        stockId:undefined,
        deliverAmount:undefined,
        deliverDate:undefined,
        createSource:this.$store.state.user.name,
        updateUser: this.$store.state.user.name
      },


    // 下拉菜单订单列表信息
      options:[],
      stock:{
        productName:undefined,
        model:undefined,
        stockQuantity:undefined,
        unit:undefined,

      },
      rules: {
        purchaser: [ { required: true, message: '请输入采购员', trigger: 'change' },],
        purchaseDate: [ { required: true, message: '请输入采购日期', trigger: 'blur' },],
        orderName: [ { required: true, message: '请输入订单名称', trigger: 'blur' },],
        orderNumber: [ { required: true, message: '请输入订单号', trigger: 'blur' },],
        salesOrderNumber:[ { required: true, message: '请选择采购批次', trigger: 'change' },],
        salesDeliveryDate:[ { required: true, message: '请输入货物信息', trigger: 'change' },],
        salesDate:[ { required: true, message: '请输入数量', trigger: 'change' },],
        customerName:[ { required: true, message: '请输入订货号', trigger: 'change' },],
        salesInvoiceNumber:[ { required: true, message: '请输入', trigger: 'change' },],
        salesInvoiceDate:[ { required: true, message: '请输入', trigger: 'change' },],
        salesInvoiceQuantity:[ { required: true, message: '请输入', trigger: 'change' },],
        salesInvoiceAmount:[ { required: true, message: '请输入', trigger: 'change' },],
        unpaidSalesInvoiceAmount:[ { required: true, message: '请输入', trigger: 'change' },],
        salesCost:[ { required: true, message: '请输入', trigger: 'change' },],
        remarks:[ { required: true, message: '请输入', trigger: 'change' },],
        

        // mobile: [{
        //   required: true,
        //   message: '请输入手机号',
        //   trigger: 'blur'
        // }, {
        //   pattern: /^1(3|4|5|7|8|9)\d{9}$/,
        //   message: '手机号格式错误',
        //   trigger: 'blur'
        // }],
        
        // field108: [{
        //   required: true,
        //   message: '请选择日期选择',
        //   trigger: 'change'
        // }],
      },

      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/finance/kltSalesOrder/importData"
      },
      pickerOptionsdate: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value1: '',
        field102Options:{},
        dialogTableVisible: false,
        // 页面
        addPurshaseBatch: false,
        addPurchaseDetail:false,
        editHanderPop: false,
        uploadOpen:false,

        value2:'',
        formLabelWidth: '120px',
        // 下拉框数据
        queryFrom1:[],
        queryFrom2:[],
        //删除数据的id
        delIds:[]
    }
  },
  mounted() {
      this.restaurants = this.loadAll();
     
      setTimeout(() => {
      this.echartsImg()
      const resizeOb = new ResizeObserver((entries) => {
        for (const entry of entries) {
          echarts.getInstanceByDom(entry.target).resize();
        }
      });
      resizeOb.observe(this.$refs.rankMain);
    });
  },
  computed: {},
  watch: {},

  created() {
    
    

    //  获取当前时间
    var time = new Date();
    var day = ("0" + time.getDate()).slice(-2);
    var month = ("0" + (time.getMonth() + 1)).slice(-2);
    var today = time.getFullYear() + "-" + month + "-" + day;
    this.form.paymentDate   = today;
    this.form.invoiceDate   = today;
    
    
    getSalesOrderList(this.queryParams).then(response => {
      this.tableData = response.rows;
      this.countNum = response.total;
    });
    
//  拿取字典数据
    const queryParams1= {
        pageNum: undefined,
        pageSize: undefined,
        dictType: 'purchaser',
        dictLabel: undefined,
        status: undefined
      };
    listData(queryParams1).then(response => {
      this.purchaserDict = response.rows;
    });
    getAllSalesOrder().then(response=>{
      this.options=response.data;
      
    })

    

  },





  methods: {
    //  step6
    getProcurementStatistics(){

      let query = {
        salesOrderId:this.editform.salesOrderId
      }
      console.log(this.editform.salesOrderId)
      getProcurementStatistics(query).then(res => {
        
        this.step6_data = res.data;
        this.echartsImg();
      })

    },


    echartsImg(){
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('invoiceRate'));
      var myChart1 = echarts.init(document.getElementById('deliverRate'));
      var myChart2 = echarts.init(document.getElementById('purchaseRate'));
      var myChart3 = echarts.init(document.getElementById('paymentRate'));
      // 绘制图表
      myChart.setOption({
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: '开票情况',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: this.step6_data.已开票, name: '开票率 '+(this.step6_data.已开票/(this.step6_data.已开票+this.step6_data.未开票)* 100).toFixed(2) + '%' },
            { value: this.step6_data.未开票, name: '未开票率 '+(this.step6_data.未开票/(this.step6_data.已开票+this.step6_data.未开票) * 100).toFixed(2) + '%'},
          ]
        }
      ]
      });

      myChart1.setOption({
        color: ['#61a0a8', '#d48265', '#91c7ae', '#749f83'], // 定义全局颜色
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: '发货情况',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: this.step6_data.已发货, name: '发货率 '+(this.step6_data.已发货/(this.step6_data.已发货+this.step6_data.未发货)* 100).toFixed(2) + '%' },
            { value: this.step6_data.未发货, name: '未发货率 '+(this.step6_data.未发货/(this.step6_data.已发货+this.step6_data.未发货)* 100).toFixed(2) + '%' },      
          ]
        }
      ]
      });
      


      myChart2.setOption({
        color: ['#61a0a8', '#d48265', '#91c7ae', '#749f83'], // 定义全局颜色
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: '采购情况',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
          { value: this.step6_data.已采购, name: '已采购率 '+(this.step6_data.已采购/(this.step6_data.已采购+this.step6_data.未采购+this.step6_data.已到货) * 100).toFixed(2) + '%' },
          { value: this.step6_data.未采购, name: '未货率 '+(this.step6_data.未采购/(this.step6_data.已采购+this.step6_data.未采购+this.step6_data.已到货)* 100).toFixed(2) + '%' },
          { value: this.step6_data.已到货, name: '已到货 '+(this.step6_data.已到货/(this.step6_data.已采购+this.step6_data.未采购+this.step6_data.已到货)* 100).toFixed(2) + '%' },
          ]
        }
      ]
      });
      myChart3.setOption({
        color: ['#61a0a8', '#d48265', '#91c7ae', '#749f83'], // 定义全局颜色
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: '采购情况',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: this.paymentFrom.unpayPrice, name: '未付款金额' },
            { value: this.paymentFrom.payPrice, name: '已付款金额' },
          ]
        }
      ]

      });
    },


    
    paymentList(){
      this.purTitle='已采购成本'
      let query = {
        salesOrderId : this.editform.salesOrderId,
      } 
      checkOut(query).then(res => {
        console.log(res);
        this.paymentFrom = res.data;
        if(res.data.purchaseType=="未完成采购"){
          this.purTitle="已采购成本"+"("+res.data.purchaseType+")";  
        }
        this.echartsImg();
      })

    },
    // step5
    invoicingRecord(type){
      if(type=="ok"){
        this.step5_invoiceForm.salesOrderId=this.editform.salesOrderId;
        let query ={
          invoiceDate:this.step5_invoiceForm.invoiceDate,
          invoiceNumber:this.step5_invoiceForm.invoiceNumber,
          salesOrderId:this.step5_invoiceForm.salesOrderId,
          stockVOList:this.step5_table
        };            
        
        saveInvoicingAndDetail(query).then(res=>{

          if(res.data==true){
            this.$message({
              message: '开票成功',
              type: 'success'
            }); 
          }
          this.getInvoicingBySalesOrderIdList();
        });
        this.dialogStep5Visible = false;
      }else if(type=="no"){
        this.getInvoicingBySalesOrderIdList();
        this.dialogStep5Visible = false;
      }else if(type="open"){
        this.dialogStep5Visible = true;
        var time = new Date();
        var day = ("0" + time.getDate()).slice(-2);
        var month = ("0" + (time.getMonth() + 1)).slice(-2);
        var today = time.getFullYear() + "-" + month + "-" + day;
        this.step5_invoiceForm.invoiceDate=today;
      }
    },
    getInvoicingBySalesOrderIdList(){
      let query = {
        salesOrderId:this.editform.salesOrderId
      }
      getSalesOrderInvoicingById(query).then(res=>{
          this.step5_table=res.data;
      })

      getInvoicingList(query).then(res=>{
        this.step5_table_2 = res.data.records
        
      })  
    },
    invoiceDetailList(invoicing){
      this.step5_dir=true;
      let query={
        invoicingId:invoicing.invoicingId
      }
      getkltInvoicingDetailList(query).then(res=>{
        
        this.step5Dirtable = res.data;
      })
    },
    invoiceDetailDel(row){
      let data = {
        invoicingId:row.invoicingId
      }
      delInvoicing(data).then(res=>{
          if(res.data==true){
            this.$message({
              message: '删除成功',
              type: 'success'
            }); 
            
          }
          this.getInvoicingBySalesOrderIdList();
      })

    },

    // step4
    deliverCancledia(row){
      this.deliverCancleDia=true;
      this.deliverCancleRow=row;
    },
    deliverCancle(){
      this.deliverCancleDia=false;
      UndeductInventoryShippingRecords(this.deliverCancleRow).then(res=>{
          if(res.data){
            this.$message({
            message: '已撤销，库存已恢复',
            type: 'success'
          });
        }else if(!res.data){
          this.$message({
            message: '撤销失败',
            type: 'warn'
          });
        }
        this.getStockDeliverList();
      });
    },
    deliverdia(row){
      this.deliverDia=true;
      this.deliverRow=row;
    },
    deliverArrive(){
      this.deliverDia=false;
      this.deliverRow.deliverType="已完成";
      getDeliverRecordEdit(this.deliverRow).then(res=>{
          if(res.data){
            this.$message({
            message: '已完成',
            type: 'success'
          });
        }
        
        this.getStockDeliverList();
      });
    },




    getStockDeliverList(){
      let query={
        pageSize:1000,
        salesOrderId:this.editform.salesOrderId
      }
      getStockPurchaseArrive(query).then(res=>{
        this.step4_table = res.data;
      })
      let query1={
        pageSize:1000,
        salesOrderId:this.editform.salesOrderId
      }
      getDeliverRecordList(query1).then(res=>{
        this.deliverList = res.data;
      })
    },
    

    deliverGoods(){
      this.dialogFormVisible=false;
      DeductInventoryShippingRecords(this.deliverInfo).then(res=>{
          if(res.data){
            this.$message({
            message: '已发货，发货记录成功',
            type: 'success'
          });
        }else if(!res.data){
          this.$message({
            message: '库存不足，扣减失败',
            type: 'warn'
          });

        }
        this.getStockDeliverList();

    });
      

    },
    deliverHandler(row){
      // 打开对话框
      this.dialogFormVisible=true;
      this.deliverInfo.deliverAmount = row.orderAmount
      this.deliverInfo.salesOrderId = this.editform.salesOrderId
      this.deliverInfo.stockId = row.stockId
      var time = new Date();
      var day = ("0" + time.getDate()).slice(-2);
      var month = ("0" + (time.getMonth() + 1)).slice(-2);
      var today = time.getFullYear() + "-" + month + "-" + day;
      this.deliverInfo.deliverDate = today;
      
    },


    // step3

    viewPurchaseDetail(item){
      
      this.purchaseDetail.purchaseId=item.purchaseId;
      let query ={
        pageSize:1000,
        purchaseId:item.purchaseId
      }
      getPurchaseDetailList(query).then(res=>{
        this.PurchaseDetailList=res.rows;
      })
    
    },
    
    arriveGood(item){
      // 到货加库存
      this.AddStock.stockId=item.stockId;
      this.AddStock.purchaseDetailId=item.purchaseDetailId;
      this.AddStock.purchaseId = item.purchaseId;
      getPurchaseDetailaddStock(this.AddStock).then(res=>{
        console.log(res.data)
        if(res.data){
          this.$message({
          message: '添加库存成功',
          type: 'success'
        });
        let query ={
        pageSize:1000,
        purchaseId:item.purchaseId
      }
        getPurchaseDetailList(query).then(res=>{
        this.PurchaseDetailList=res.rows;
      })
        }
      })
      this.visible1 = false
    },
    // step 2 打开查看采购信息
    openPurchase(){
      this.purchasedrawer=true;
      this.getPurchaseBatchAboutOrderList();
    },
    openDetailDrawer(item){
      this.detailDrawer=true;
      this.purchaseDetail.purchaseId=item.purchaseId;
      let query ={
        pageSize:1000,
        purchaseId:item.purchaseId
      }
      getPurchaseDetailList(query).then(res=>{
        this.PurchaseDetailList=res.rows;
      })
    },
    // 开启手风琴
    collapseOpen(){
      this.activeNames.push("1")
    },
    // 添加采购明细数据
   addPurchaseDetailTable(formname){
    
    this.purchaseDetail.createSource= this.$store.state.user.name,
    this.purchaseDetail.updateUser= this.$store.state.user.name
      this.$refs[formname].validate((valid) => {
          if (valid) {
             getPurchaseDetailInsert(this.purchaseDetail).then(response => {
              if(response.data==true){
                this.$message({
                  message: '添加成功',
                  type: 'success'
                });
                this.addPurchaseDetail = false;
                //清空 purchaseDetail
                for (let key in this.purchaseDetail) {
                    if (this.purchaseDetail.hasOwnProperty(key)
                    &&key!="createSource"
                    &&key!="updateUser"
                    &&key!="purchaseId"
                  ) {
                      this.purchaseDetail[key] = null;
                    }
                }
                // 刷新列表
            this.getPurchaseDetailAboutOrderList();
              }
            });
            
          } else {
            this.open3();
          }
        });
    },





   

       
        
    




    addStockId(val){
      this.purchaseDetail.stockId=val.stockId
    },


    // 计算总数
    Calculator(a,b){
          return a*b;
    },  
 
    Price(i){
      if(i==1){
        if(this.purchaseDetail.unitPrice&&this.purchaseDetail.quantity){
          // 未税
          this.purchaseDetail.amount = this.Calculator(this.purchaseDetail.unitPrice,this.purchaseDetail.quantity);
        }else{
          this.purchaseDetail.amount=0
        }
        if(this.purchaseDetail.taxIncludedPrice&&this.purchaseDetail.quantity){
          // 已税
          this.purchaseDetail.totalPrice = this.Calculator(this.purchaseDetail.taxIncludedPrice,this.purchaseDetail.quantity); 
        }else{
          this.purchaseDetail.totalPrice=0
        }
        if(this.purchaseDetail.totalPrice&&this.purchaseDetail.paymentAmount){
          // 未付
          this.purchaseDetail.unpaidAmount = this.purchaseDetail.totalPrice - this.purchaseDetail.paymentAmount;
        }else{
          this.purchaseDetail.unpaidAmount=0
        }
        if(this.purchaseDetail.totalPrice&&this.form.invoiceAmount){
            // 未开票
          this.purchaseDetail.unpaidInvoiceAmount = this.purchaseDetail.totalPrice - this.purchaseDetail.invoiceAmount;
        }else{
          this.purchaseDetail.unpaidInvoiceAmount=0
        }
      }
    },


    //    表格操作
    handleClick(val) {
        let aa = {
          salesOrderId:val.salesOrderId?val.salesOrderId:'',
          salesOrderNumber:val.salesOrderNumber?val.salesOrderNumber:'',
          salesDeliveryDate:val.salesDeliveryDate?val.salesDeliveryDate:'',
          salesDate:val.salesDate?val.salesDate:'',
          customerName:val.customerName?val.customerName:'',
          salesInvoiceNumber:val.salesInvoiceNumber?val.salesInvoiceNumber:'',
          salesInvoiceDate:val.salesInvoiceDate?val.salesInvoiceDate:'',
          salesInvoiceQuantity:val.salesInvoiceQuantity?val.salesInvoiceQuantity:'',
          salesInvoiceAmount:val.salesInvoiceAmount?val.salesInvoiceAmount:'',
          unpaidSalesInvoiceAmount:val.unpaidSalesInvoiceAmount?val.unpaidSalesInvoiceAmount:'',
          salesCost:val.salesCost?val.salesCost:'',
          remarks:val.remarks?val.remarks:'',
          };   
          this.editform=aa;
          this.activeNames=[];
      },
        // 按钮翻页
      on_click(e){
        this.stepNum = e;
        this.active = e;
        switch(e) {
          case 1:{
             // 获取所需订货
             let query={
              pageSize:1000,
              salesOrderId:this.editform.salesOrderId
            }
            getStockPurchase(query).then(res=>{
              console.log(res)
             
              this.step2_table = res.data;
            })
            break;
          }
          case 2:{
            this.getPurchaseBatchAboutOrderList();
            break;
          }
          case 3:{
            this.getStockDeliverList();
            break;
          }
          case 4:{
            this.getInvoicingBySalesOrderIdList();
            break;
          }
          case 5:{
            this.paymentList();
            this.getProcurementStatistics()
            break;
          }
         
        
        }
      },
      nextStep(){
        this.active=this.active<=4?this.active+1:0
        
        switch(this.active) {
          case 1:{
             // 获取所需订货
             let query={
              pageSize:1000,
              salesOrderId:this.editform.salesOrderId
            }
            getStockPurchase(query).then(res=>{            
              this.step2_table = res.data;
            })
            break;
          }
          case 2:{
            this.getPurchaseBatchAboutOrderList();
            break;
          }
          case 3:{
            this.getStockDeliverList();
            break;
          }
          case 4:{
            this.getInvoicingBySalesOrderIdList();
            break;
          }
          case 5:{
            this.paymentList();
            break;
          }
         
          
        }
      },


      // handleClose
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
    
      

   // 获取当前合同采购数据信息
    getPurchaseBatchAboutOrderList(){
      let query={
        pageSize:1000,
        salesOrderId:this.editform.salesOrderId
      }
      let query1={
        Size:1000,
        purchaseId:this.purchaseDetail.purchaseId
      }
      getPurchaseBatchList(query).then(res=>{
        this.PurchaseBatchList=res.data.rows;
      })
      getPurchaseDetailList(query1).then(res=>{
        this.purchaseDetail=res.data.records;
      })
      



    },
   
    getPurchaseDetailAboutOrderList(){
      
      let query1={
        pageSize:1000,
        purchaseId:this.purchaseDetail.purchaseId
      }
      
      getPurchaseDetailList(query1).then(res=>{
        this.purchaseDetail=res.data.records;
      })
    },
  
   
   // 添加数据
   addtable(formname){
    this.purchaseform.salesOrderId=this.editform.salesOrderId;
    this.purchaseform.createSource= this.$store.state.user.name,
    this.purchaseform.updateUser= this.$store.state.user.name
   
  
      this.$refs[formname].validate((valid) => {
          if (valid) {
             getPurchaseBatchInsert(this.purchaseform).then(response => {
              if(response.data){
                this.addPurshaseBatch = false;
                this.$message({
                  message: '添加成功',
                  type: 'success'
                });
                //清空 purchaseform
                for (let key in this.purchaseform) {
                    if (this.purchaseform.hasOwnProperty(key)
                    &&key!="createSource"
                    &&key!="updateUser") {
                      
                      this.purchaseform[key] = null;

                    }
                }
              }
            });
            // 刷新列表
            this.getPurchaseBatchAboutOrderList();
          } else {
            this.open3();
          }
        });
    },
    



    edittable(formname){
      if(this.editform.purchaseName==''||this.editform.purchaseName==undefined){
        this.editform.purchaseId=undefined
      }
      
      this.$refs[formname].validate((valid) => {
          if (valid) {
            delete formname.createSource;
            getSalesOrderEdit(this.editform).then(response => {
             
              if(response.data==true){
                this.$message({
                  message: '修改成功',
                  type: 'success'
                });
                this.editHanderPop = false;
                clearTimeout(this.timeout);
                this.timeout = setTimeout(() => {
                  this.resetForm();
                }, 500 * Math.random());
              }
            });
            getSalesOrderList(this.queryParams).then(response => {
              this.tableData = response.rows;
              this.countNum = response.total;
            }
            );  
          } else {
            this.open3();
          }

        });
       
    },
    // 筛选下拉数据
    loadAll() {
      return []
    },


    


    // 订单名称筛选
    querySearchAsync1(queryString, cb) {
      var restaurants1 = this.restaurants1;       
        var results = queryString ? restaurants1.filter(this.createStateFilter(queryString)) : restaurants1;
        clearTimeout(this.timeout);
        this.restaurants1=[];
            this.timeout = setTimeout(() => {
              getAllPurchaseBatch().then(response=>{
                response.data.forEach(item=>{
                  this.restaurants1.push({value:item.orderName,address:item.orderNumber+"-"+item.purchaser +"-"+item.order_number,id:item.purchaseId})
                });
              })
              cb(results);
            }, 1000 * Math.random());
    },
    querySearchAsync5(queryString, cb) {
      var restaurants5 = this.restaurants5;       
        var results = queryString ? restaurants5.filter(this.createStateFilter(queryString)) : restaurants5;
        clearTimeout(this.timeout);
        this.restaurants5=[];
            this.timeout = setTimeout(() => {
              getAllSalesOrder().then(response=>{
                response.data.forEach(item=>{
                  this.restaurants5.push({value:item.salesInvoiceNumber,address:"开票数量：" +item.salesInvoiceQuantity})
                });
              })
              cb(results);
            }, 1000 * Math.random());
    },

    // this.restaurants1.push({value:item.model,address:item.productName+"-"+item.stockQuantity+item.unit ,id:item.stockId})
    querySearchAsync3(queryString, cb) {
      var restaurants3 = this.restaurants3;       
        var results = queryString ? restaurants3.filter(this.createStateFilter(queryString)) : restaurants3;
        clearTimeout(this.timeout);
        this.restaurants3=[];
            this.timeout = setTimeout(() => {
              getAllStock().then(response=>{
                response.data.forEach(item=>{
                  this.restaurants3.push({value:item.model,address:item.productName+"-"+item.stockQuantity+item.unit ,id:item.stockId})
                });
              })
              cb(results);
            }, 1000 * Math.random());
    },
    querySearchAsync4(queryString, cb) {
      var restaurants4= this.restaurants4;       
        var results = queryString ? restaurants4.filter(this.createStateFilter(queryString)) : restaurants4;
        clearTimeout(this.timeout);
        this.restaurants4=[];
            this.timeout = setTimeout(() => {
              getAllStock().then(response=>{
                response.data.forEach(item=>{
                  this.restaurants4.push({value:item.model,address:item.productName+"-"+item.stockQuantity+item.unit ,id:item.stockId})
                });
              })
              cb(results);
            }, 1000 * Math.random());
    },
    // 
    querySearchAsync7(queryString, cb) {
        var restaurants7 = this.restaurants7;
        var results1 = queryString ? restaurants7.filter(this.createStateFilter(queryString)) : restaurants7;
    clearTimeout(this.timeout);
    this.restaurants7=[];
        this.timeout = setTimeout(() => {
          getAllSalesOrder().then(response=>{
            response.data.forEach(item=>{
              this.restaurants7.push({value:item.salesOrderNumber,address:item.customerName})
            });
          })
          cb(results1);
        }, 1000 * Math.random());
    },

    createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
    },


    handleSelect(item) {
        // 选择内容并查询
        this.form.purchaseName = item.value;
        this.form.purchaseId = item.id;
        
    },
    handleSelect2(item) {
        // 选择内容并查询
        this.editform.purchaseName = item.value;
        this.editform.purchaseId = item.id;
    },
    handleSelect5(item) {
        // 选择内容并查询
        this.queryParams.purchaseName = item.value;
        this.queryParams.purchaseId = item.id;
        this.getQueryFrom();
        
    },
    handleSelect3(item) {
        // 选择内容并查询
        this.form.productName = item.value;
        this.form.stockId = item.id;
        
    },
    handleSelect4(item) {
        // 选择内容并查询
        this.editform.productName = item.value;
        this.editform.stockId = item.id;
       
        
    },
    handleSelect6(item) {
        // 选择内容并查询
        this.queryParams.productName = item.value;
        this.queryParams.stockId = item.id;
        this.getQueryFrom();
    },
    handleSelect7(item) {
        // 选择内容并查询
        this.queryParams.orderName = item.value;
        this.getQueryFrom();
    },
    
    // 重置表单
    resetForm(item) {
      if(item==undefined){
        for (let key in this.queryParams) {
            if (this.queryParams.hasOwnProperty(key)) {
              this.queryParams[key] = null; // 或者使用 delete jsonObj[key];
            }
        }

      }else if(item == "purchaseName"){
        this.queryParams.purchaseId = undefined;
      }else if(item == "productName"){
        this.queryParams.stockId = undefined;
      }else if(item == "orderName"){
        this.queryParams.orderName = undefined;
      }else if(item == "orderNumberProduct"){
        this.queryParams.orderNumberProduct = undefined;
      }
      
    for (let key in this.form) {
        if (this.form.hasOwnProperty(key)) {
          this.form[key] = null; 
        }
    }
    for (let key in this.editform) {
        if (this.editform.hasOwnProperty(key)) {
          this.editform[key] = null;
        }
    }
    this.getQueryFrom();
    },
    getQueryFrom(){
      getSalesOrderCount(this.queryParams).then(response => {
        this.countNum = response.data;
      });
      getSalesOrderList(this.queryParams).then(response => {
        this.tableData = response.rows;
        this.countNum = response.total;
      })
    },

    deletetable(){
      let idList  = this.delIds
      idList = JSON.parse(JSON.stringify(idList));
      if(idList.length>0){
        setTimeout(()=>{
        
        getSalesOrderDelete(idList).then(response => {
          if(response.data==true){
            console.log(response.date);
            
            getSalesOrderList(this.queryParams).then(response => {
              this.tableData = response.rows;
              this.countNum = response.total;
            }); 
            this.$message({
              message: '删除成功',
              type: 'success'
            });
          }
      })
      },800)
      }
    },

    handleCurrentChange(val) {
      this.queryParams.pageNum=val;
      console.log(val)
      getSalesOrderList(this.queryParams).then(response => {
        this.tableData = response.rows;
        this.countNum = response.total;
      });
    },
    handleSizeChange(val) {
      this.queryParams.pageSize=val;
      console.log(val)
      getSalesOrderList(this.queryParams).then(response => {
        this.tableData = response.rows;
        this.countNum = response.total;
      });
    },
    getList() {
      this.loading = true;
      getSalesOrderList(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.userList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },

    open3() {
        this.$message({
          message: '请检查信息是否填写完整',
          type: 'warning'
        });
      },
 
    onOpen() {},
    onClose() {
      this.$refs['elForm'].resetFields()
    },
    close() {
      this.$emit('update:visible', false)
    },
    handleConfirm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        this.close()
      })
    },
   

     /** 下载模板操作 */
     importTemplate() {
      this.download('finance/kltSalesOrder/importTemplate', {
      }, `销售批次导入模板_${new Date().getTime()}.xlsx`)
    },

    // 导出数据
    importData() {
      this.download('finance/kltSalesOrder/export', {
          
      }, `销售批次数据导出_${new Date().getTime()}.xlsx`)
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
//  表格多选
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.delIds=[];
        // 判断选择行数
        if(val.length==1){

          this.multipleSelection = val;
        let aa = {
          salesOrderId:val[0].salesOrderId?val[0].salesOrderId:'',
          salesOrderNumber:val[0].salesOrderNumber?val[0].salesOrderNumber:'',
          salesDeliveryDate:val[0].salesDeliveryDate?val[0].salesDeliveryDate:'',
          salesDate:val[0].salesDate?val[0].salesDate:'',
          customerName:val[0].customerName?val[0].customerName:'',
          salesInvoiceNumber:val[0].salesInvoiceNumber?val[0].salesInvoiceNumber:'',
          salesInvoiceDate:val[0].salesInvoiceDate?val[0].salesInvoiceDate:'',
          salesInvoiceQuantity:val[0].salesInvoiceQuantity?val[0].salesInvoiceQuantity:'',
          salesInvoiceAmount:val[0].salesInvoiceAmount?val[0].salesInvoiceAmount:'',
          unpaidSalesInvoiceAmount:val[0].unpaidSalesInvoiceAmount?val[0].unpaidSalesInvoiceAmount:'',
          salesCost:val[0].salesCost?val[0].salesCost:'',
          remarks:val[0].remarks?val[0].remarks:'',
          updateUser: this.$store.state.user.name
          };   
          console.log(val[0].salesOrderId)
          this.delIds.push(val[0].salesOrderId);
          this.editform=aa;
         

          this.editBotton=false;
          this.deleteBotton=false;
        }else if(val.length>0){
          for(let a=0;a<val.length;a++){
            this.delIds.push(val[a].salesOrderId);
          }
          this.editBotton=true;
          this.deleteBotton=false;
        }else{
          this.editBotton=true;
          this.deleteBotton=true;
        }
      },





      addStock(){
        getStockInsert(this.stock).them(response=>{
          if(response.data==true){
            this.$message({
              message: '新增成功',
              type: 'success'
            });
          }
      })
      },
      Changed(){
        this.$forceUpdate()

      },
      
    }

}

</script>














<style>
.search{
    margin-top: 10px;
}
.infotable{
    margin-top: 10px;
    margin-left: 1%;
    margin-right: 1%;    
}
.infotable_handerchild{
    margin-top: 10px;
    margin-left: 40px;
}
.pagination{
  margin-right: 20px;    
    text-align :right;
}
.HanderPop{
  width:100%;
  display: inline-block;
}
.inputplace{
  width: 200px;
}
.el-row {
    margin-bottom: 5px;
    &:last-child {
      margin-bottom: 0;
    }
  }
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

</style>